<template>
    <div class="d_flex">
        <el-input v-model="searchKey" :placeholder="placeholder" style="width: 230px;" class="mr10">
            <template #append>
                <el-button :icon="IconSearch" @click="keySearchClick" />
            </template>
        </el-input>
        <el-button @click="open" v-if="$slots['default']">高级搜索</el-button>
    </div>

    <mi-drawer v-model="edit.show" size="500px">
        <slot>
            <div class="f_secondary">需要自己开发开发搜索表单内容哦~</div>
        </slot>

        <el-button type="primary" icon="Search" @click="seniorSearchClick">搜索</el-button>
        <el-button icon="Refresh" @click="search.reset()">清空</el-button>

    </mi-drawer>

</template>

<script setup lang="ts">
import {Search as IconSearch } from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import Edit from "@/model/edit";
import Search from "@/model/search";

const props = withDefaults(defineProps<{
    search:Search,
    placeholder?:string,
}>(),{
    placeholder:'搜索关键词'
})

const searchKey = ref<string>('')
const edit = reactive(new Edit({}))

// 关键词搜索
const keySearchClick = () => {
    const key = searchKey.value
    // 修改查询条件
    props.search.info = {key}
    props.search.submit()
}

// 高级搜索
const seniorSearchClick = () => {
    props.search.submit()
    close()
}

const open = () => {
    edit.show = true
}
const close = () => {
    edit.show = false
}


</script>

<style scoped>

</style>
